<script setup lang="ts">
import { getSimContent, updateSimContent } from "@@/apis/scn"
import CodeEditor from "@@/components/CodeEditor/index.vue"
import { ElMessage } from "element-plus"
import { nextTick, ref, watch } from "vue"
import { useRoute } from "vue-router"

interface Props {
  dialogVisible: boolean
}

const props = defineProps<Props>()
const emit = defineEmits(["update:dialogVisible"])

// 状态和引用
const route = useRoute()
const code = ref<string>("")
const editorRef = ref()
const visible = ref(props.dialogVisible)
const loading = ref(false)

// 监听props变化
watch(() => props.dialogVisible, (newVal) => {
  visible.value = newVal
})

// 监听本地状态变化
watch(() => visible.value, (newVal) => {
  emit("update:dialogVisible", newVal)
})

// 监听对话框显示状态
watch(
  () => visible.value,
  async (newVal) => {
    if (newVal) {
      try {
        loading.value = true
        const content = await getSimContent(route.query.id as string)
        code.value = content

        nextTick(() => {
          if (editorRef.value?.editor) {
            editorRef.value.editor.layout()
          }
        })
      } catch (error) {
        console.error("获取sim内容失败:", error)
        ElMessage.error("获取sim内容失败")
      } finally {
        loading.value = false
      }
    }
  }
)

// 关闭对话框
function closeDialog() {
  visible.value = false
}

// 保存内容
async function handleSave() {
  try {
    loading.value = true

    // 获取编辑器内容
    code.value = editorRef.value.getEditContent()

    // 创建 FormData 对象
    const formData = new FormData()
    formData.append("scnId", route.query.id as string)
    formData.append("content", code.value || "")

    // 发送请求
    await updateSimContent(formData)
    ElMessage.success("保存成功")
    closeDialog()
  } catch (error) {
    console.error("保存sim内容失败:", error)
    ElMessage.error("保存失败")
  } finally {
    loading.value = false
  }
}

// 编辑器准备就绪
function handleEditorReady(editor: any) {
  editorRef.value.editor = editor

  // 编辑器加载完成后，需要手动触发 layout
  nextTick(() => {
    if (editor) {
      editor.layout()
    }
  })
}
</script>

<template>
  <el-dialog
    v-model="visible"
    title="SIM文件编辑"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="false"
    class="sim-editor-dialog"
  >
    <div class="editor-container">
      <CodeEditor
        ref="editorRef"
        :code="code"
        :visible="visible"
        :readonly="false"
        @editor-ready="handleEditorReady"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSave" :loading="loading">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.editor-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

:deep(.monaco-editor) {
  width: 100% !important;
  height: 100% !important;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>

<style lang="scss">
.sim-editor-dialog {
  .el-dialog__body {
    padding: 12px;
    height: 440px;
    overflow: hidden;
  }

  .el-dialog__header {
    margin-right: 0;
    padding: 15px 20px;
    border-bottom: 1px solid #e4e7ed;
  }
}
</style>
